<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页 - 示例代码</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <nav class="navbar">
            <div class="logo">
                <h1>我的个人主页</h1>
            </div>
            <ul class="nav-menu">
                <li class="nav-item"><a href="#about" class="nav-link">关于我</a></li>
                <li class="nav-item"><a href="#education" class="nav-link">教育背景</a></li>
                <li class="nav-item"><a href="#skills" class="nav-link">技能特长</a></li>
                <li class="nav-item"><a href="#projects" class="nav-link">项目经历</a></li>
                <li class="nav-item"><a href="#contact" class="nav-link">联系方式</a></li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
    </header>

    <main>
        <section id="about" class="hero">
            <div class="hero-content">
                <img src="https://picsum.photos/seed/profile/200/200.jpg" alt="个人照片" class="profile-img">
                <h2>张三</h2>
                <p class="subtitle">前端开发工程师</p>
                <p class="description">
                    热爱编程，专注于Web前端开发，具有丰富的项目经验。擅长HTML、CSS、JavaScript等前端技术，
                    对用户体验和界面设计有深入理解。
                </p>
                <a href="#contact" class="btn btn-primary">联系我</a>
            </div>
        </section>

        <section id="education" class="section">
            <div class="container">
                <h2 class="section-title">教育背景</h2>
                <div class="education-container">
                    <div class="education-item">
                        <h3>某某大学</h3>
                        <p class="period">2020年9月 - 2024年6月</p>
                        <p>计算机科学与技术 本科</p>
                        <p>主修课程：数据结构、算法分析、Web开发、数据库系统</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="skills" class="section section-alt">
            <div class="container">
                <h2 class="section-title">技能特长</h2>
                <div class="skills-container">
                    <div class="skill-category">
                        <h3>前端技术</h3>
                        <div class="skill-items">
                            <div class="skill-item">
                                <span class="skill-name">HTML5</span>
                                <div class="skill-bar">
                                    <div class="skill-level" style="width: 90%"></div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <span class="skill-name">CSS3</span>
                                <div class="skill-bar">
                                    <div class="skill-level" style="width: 85%"></div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <span class="skill-name">JavaScript</span>
                                <div class="skill-bar">
                                    <div class="skill-level" style="width: 80%"></div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <span class="skill-name">React</span>
                                <div class="skill-bar">
                                    <div class="skill-level" style="width: 75%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="skill-category">
                        <h3>后端技术</h3>
                        <div class="skill-items">
                            <div class="skill-item">
                                <span class="skill-name">Node.js</span>
                                <div class="skill-bar">
                                    <div class="skill-level" style="width: 70%"></div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <span class="skill-name">Express</span>
                                <div class="skill-bar">
                                    <div class="skill-level" style="width: 65%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="projects" class="section">
            <div class="container">
                <h2 class="section-title">项目经历</h2>
                <div class="projects-container">
                    <div class="project-card">
                        <div class="project-img">
                            <img src="https://picsum.photos/seed/project1/400/250.jpg" alt="项目1">
                        </div>
                        <div class="project-content">
                            <h3>电商网站前端开发</h3>
                            <p class="project-period">2025年3月 - 2025年6月</p>
                            <p class="project-description">
                                参与开发一个B2C电商平台的前端界面，负责商品展示、购物车、用户中心等模块的开发。
                                使用React框架和Redux进行状态管理，实现了响应式设计和良好的用户体验。
                            </p>
                            <div class="project-tags">
                                <span class="tag">React</span>
                                <span class="tag">Redux</span>
                                <span class="tag">CSS3</span>
                                <span class="tag">响应式设计</span>
                            </div>
                        </div>
                    </div>
                    <div class="project-card">
                        <div class="project-img">
                            <img src="https://picsum.photos/seed/project2/400/250.jpg" alt="项目2">
                        </div>
                        <div class="project-content">
                            <h3>企业官网开发</h3>
                            <p class="project-period">2022年10月 - 2022年12月</p>
                            <p class="project-description">
                                为一家科技公司设计和开发官方网站，包括首页、产品介绍、新闻动态、联系我们等页面。
                                注重SEO优化和页面加载速度，使用CSS动画增强用户体验。
                            </p>
                            <div class="project-tags">
                                <span class="tag">HTML5</span>
                                <span class="tag">CSS3</span>
                                <span class="tag">JavaScript</span>
                                <span class="tag">SEO优化</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact" class="section section-alt">
            <div class="container">
                <h2 class="section-title">联系方式</h2>
                <div class="contact-container">
                    <div class="contact-info">
                        <div class="contact-item">
                            <div class="contact-icon">📧</div>
                            <div class="contact-details">
                                <h3>电子邮箱</h3>
                                <p>example@email.com</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">📱</div>
                            <div class="contact-details">
                                <h3>手机号码</h3>
                                <p>138-xxxx-xxxx</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">📍</div>
                            <div class="contact-details">
                                <h3>所在地址</h3>
                                <p>某某省某某市某某区</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">🔗</div>
                            <div class="contact-details">
                                <h3>社交媒体</h3>
                                <p>
                                    <a href="#">GitHub</a> | 
                                    <a href="#">LinkedIn</a> | 
                                    <a href="#">知乎</a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="contact-form">
                        <h3>给我留言</h3>
                        <form id="contactForm">
                            <div class="form-group">
                                <label for="name">姓名</label>
                                <input type="text" id="name" name="name" required>
                            </div>
                            <div class="form-group">
                                <label for="email">邮箱</label>
                                <input type="email" id="email" name="email" required>
                            </div>
                            <div class="form-group">
                                <label for="message">留言内容</label>
                                <textarea id="message" name="message" rows="5" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">发送留言</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 张三个人主页. 保留所有权利.</p>
            <p>本页面使用HTML5和CSS3构建，采用响应式设计</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>